<template>
  <div class="li">
      
      <Input @parentSearch="Search" @resetParent="resetParent"/>


      <liebiao :arr="arr" @parentDel='getinputData'  @parentIsshow="parentIsshow" />
       <!-- 
         1,弹出页面
         2,用户点击登陆,弹出面包打开用户输入内容
         3,用户输入完毕 点击提交按钮触发第二不,打包所欲shuju
         发送给后端 ,后端添加成功之后通知前端
         前端关闭弹窗,并且刷新表格
        -->
  
      <Page :ids="ids" :arr="arr" :total="total" @resetdata="getinputData" @delfun="getinputData"/>
        <!-- 弹窗组件 -->
      <Mydialog v-if="isshow" :arr="obj" @resetfun="getinputData"/>
  </div>
</template>

<script>
import Input from './compnents/Input.vue'
import Liebiao from './compnents/Liebiao.vue'
import Page from './compnents/page.vue'
import Mydialog from './compnents/Mydialog.vue'
import {getCourseApi} from '../../api/homeApi'

export default {
   components: {
     Input,
     Liebiao,
     Page,
     Mydialog ,
     
   },
   
   data () {
     return {
        arr:[],
        seachVal:'' , //搜索关键字
        isshow:false , //控制弹框显示和隐藏
        total:250 ,        //总条数,
        page:1,          //当前页码
        pageSize:8    ,    //当前显示多少条数
        obj:{   //空对象 等待子组件进行传值

        },
        ids: ''
     


}  
   },
   mounted () {
     this.getinputData(
       
     )
   },
   methods: {

  

    // 添加第一步控制弹框
    parentIsshow(val){
    this.isshow=true
    this.obj=val
    },
    // 重置工呢过的按钮
    resetParent(){
      this.$router.go(0)
    },
    // 查询功能
     Search(val){
        this.seachVal= val 
        console.log(this.seachVal);
        this.getinputData()
     },
     getinputData(){
      // 发送请求 获取数据   保存到当前数组中
      var params ={
          id:this.seachVal,     //发送数据,传id
          page:this.page   ,     //分页当前页码 pageSize 表示当前页显示多少条
          pageSize:this.pageSize
       }
       getCourseApi(params).then(res=>{
         if(res.code==200){
           this.arr=res.data   
           this.total=res.total     
         }
       })
     }
     
   }
}
</script>

<style scoped lang="less">
.li{
  height: 100%;
  height: 100%;
}
    // .zhong{
    //   display: flex;
    //   justify-content: center;
    //   flex-wrap: wrap;
    //   align-items: center;
    // }
</style>